<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本用法</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        function f1(){
            console.log("这是在jquery中使用的静态绑定事件");
        }
        // window.onload = function(){
        //     document.getElementById("btn").onclick = function(){
        //         console.log("这是动态绑定事件");
        //     }
        // }
        // 在jquery中,对js的绝大部分方法做了简化
        // 但是这些方法调用者必须是jquery对象
        // 因此,有时候我们需要将一个DOM对象转换成jquery对象
        // DOM对象-->jquery对象:$(DOM对象)
        // $(document).ready(function(){
        //     $("#btn").click(function(){
        //         console.log("这是在jquery中使用的动态绑定事件");
        //     })
        // });

        // 简化版
        // $(document).ready(fn) = $(fn);
        $(function(){
            $("#btn").click(function(){
                console.log("这是在jquery中使用的动态绑定事件");
                // DOM
                console.log(document.getElementById("btn").innerHTML);
                // jquery
                console.log($("#btn").html());
                // this始终表示DOM对象
                // console.log(this.html());
                console.log(this.innerHTML);
                console.log($(this).html());

                // 在某些场景中,会出现调用DOM方法的情况
                // 但是此时的方法调用者是一个jquery对象
                // 我们需要将一个jquery对象转换成DOM对象再来调用
                // jquery对象 --> DOM对象: jquery对象[0]或者jquery.get(0)
                console.log($("#btn")[0].innerHTML);
                $("#btn").get(0).innerHTML = "修改了"

            })
        });
    </script>
</head>
<body>
<button onclick="f1()">静态绑定</button><br>
<button id="btn">动态绑定</button><br>
</body>
</html>